<template>
	<view class="refundbox" :style="{height: refundHeight+'px'}">
		<view class="orderinfo">
			<view class="box d-jc-sb d-ai-c">
				<view class="box d-ai-c d-header">
					<view class="">
						
					</view>
					<view class="ml-2">
						退款金额
					</view>
				</view>
				<view class="" style="color: #FF8338;font-size: 30rpx;font-weight: blod;" @tap="rules">
					退款规则
				</view>
			</view>
			<view class="orderinfo-each mt-3">
				退款金额：<text style="color: #FF8338;">￥{{refundMoney}}</text>
			</view>
			<view class="orderinfo-each mt-1" style="font-size: 26rpx;font-weight: 500;color: #CCCCCC;">
				不可修改，根据退款规则返还订单金额
			</view>
			
		</view>
		<view class="commonArea" style="padding: 10px;">
			<view class="box d-ai-c d-header" style="border-bottom: 3rpx solid #F2F7FF;">
				<view class="">
					
				</view>
				<view class="ml-2">
					退款信息
				</view>
			</view>
			<view class="item box d-jc-sb d-ai-c">
				<view class="label">申请原因</view>
				<view class="box d-ai-c">
					<picker @change="bindPickerChange1" :value="index1" :range="array1">
						<view class="uni-input colorGray">{{array1[index1]}}</view>
					</picker>
					<image class="itm-img" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/qiantou.png" mode=""></image>
				</view>
			</view>
			<view class="item"><text class="label">退款说明</text></view>
			<view>
				<textarea class="reason" v-model="remark"  placeholder="请填写补充说明，有利于您的退款售后哦~"></textarea>
			</view>
		</view>
		<view class="btn" @tap="promiseapply">
			提交申请
		</view>
		<wybpopup ref="popup" type='center' :width="620" :height="494" :radius="0">
			<view class="popup-header">
				<view class="">
					退款规则
				</view>
			</view>
			<view class="content-type">
				1.服务开始前，提前24小时申请退款，收取20%管理费；<br> 2.在24小时内，未上门服务时申请退款，收取50%管理费；<br> 3.上门服务前两个小时内，用户违约造成的服务未完成，不予退款。
			</view>
			<view class="typeBtn" @tap="sure">
				确定
			</view>
		</wybpopup>
	</view>
</template>

<script>
	import wybpopup  from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
		          wybpopup
		       },
		data() {
			return {
				remark:'',
				orderNo:'',
				money:'',
				index1:0,
				array1: ['信息填写有误','有事去不了', '已经重复下单'],
				refundHeight:400,
				refundMoney:'',
			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.refundHeight = res.windowHeight - uni.upx2px(60) //windoHeight为窗口高度，主要使用的是这个
				}
			})
		},
		onLoad(option) {
			this.orderNo = option.orderNo
			this.money = option.money
			this.refundmoney()
		},
		methods: {
			refundmoney(){
				this.$api.refundmoney({
					orderNo:this.orderNo,
				}).then((res) => {
					if(res.data.code=200){
						console.log(res.data.dataMap)
						this.refundMoney = res.data.dataMap.money
					}
							
				})
			},
			bindPickerChange1: function(e) {
				this.index1 = e.target.value
			},
			sure(){
				this.$refs.popup.hide()
			},
			rules(){
				this.$refs.popup.show()
			},
			promiseapply(){
				this.$api.refundorderlist({
					status:1,
					cause:this.index1,
					remark:this.remark,
					money:this.money,
					orderNo:this.orderNo,
				}).then((res) => {
					if(res.data.success){
						uni.showToast({
						    title: '提交成功，等待审核',
						    duration: 2000,
							icon:'none'
						});
						uni.navigateTo({
							url:'Allrefund'
						})
					}else{
						uni.showToast({
						    title: res.data.message,
						    duration: 2000,
							icon:'none'
						});
					}
							
				})
			},
		}
	}
</script>

<style lang="less" scoped>
.refundbox{
	background: #F2F7FF;
	padding: 30rpx;
}
.commonArea{
	margin-top: 20rpx;
	width: 660rpx;
	height: 520rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	.d-header{
		height: 80rpx;
		view:nth-child(1){
			width: 8rpx;
			height: 26rpx;
			background: #FF8338;
			border-radius: 4rpx;
		}
		view:nth-child(2){
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}
	}
     .label{color:#666666;font-size:30rpx;margin-right:15px;}
	 .item{padding:15px 0;display: flex;align-items: center;}
	 .itm-img{
		 width: 15rpx;
		 height: 30rpx;

	 }
	 .reason{
	 	  background: #F8F8F8;
	 	  border-radius: 8px;
	 	  width: 620rpx;
	 	  padding:10px;
	 	  height: 200rpx;
	 }
  }
.orderinfo{
	width: 630rpx;
	min-height: 117rpx;
	padding: 30rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	.orderinfo-each{
		font-size: 30rpx;
		font-weight: 500;
		color: #666666;
	}
	.d-header{
		height: 80rpx;
		border-bottom: 3rpx solid  #F2F7FF;
		view:nth-child(1){
			width: 8rpx;
			height: 26rpx;
			background: #FF8338;
			border-radius: 4rpx;
		}
		view:nth-child(2){
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}
	}
}
.btn{
	margin-top: 140rpx;
	width: 690rpx;
	height: 100rpx;
	background: #FF8338;
	border-radius: 50rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 100rpx;
	text-align: center;
}
.popup-header{
	height: 100rpx;
	padding: 0 30rpx 0 30rpx;
	text-align: center;
	line-height: 100rpx;
	view{
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	
}
.content-type{
	width: 480rpx;
	height: 520rpx;
	// border:1px solid red;
	margin: 0 auto;
	margin-top: 15rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #999999;
}	
.typeBtn{
	width: 620rpx;
	height: 100rpx;
	background: #FF8338;
	line-height: 100rpx;
	text-align: center;
	color: #FFFFFF;
	font-size: 30rpx;
	position: fixed;
	bottom: 0rpx;
}
</style>
